<template>
  <div>
    <div class="contenBox">
      <el-form ref="form" :model="formQuery" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户名">
              <el-input
                @keyup.enter.native="searchForm"
                v-model="formQuery.userName"
                class="inputWidth"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="关注点">
              <el-input
                @keyup.enter.native="searchForm"
                v-model="formQuery.attention"
                class="inputWidth"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="关注时间">
              <el-date-picker
                @keyup.enter.native="searchForm"
                class="inputWidth"
                v-model="formQuery.attentionDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <div style="text-align: center">
          <el-button type="info" @click="emptyForm" icon="el-icon-delete"
            >清空</el-button
          >
          <el-button
            type="primary"
            @keyup.enter.native="searchForm"
            icon="el-icon-search"
            >搜索</el-button
          >
        </div>
      </el-form>
    </div>
    <div class="contenBox">
      <my-table
        :tableKey="tableKey"
        :data="tableData"
        :column="columnsData"
        :checkboxVal="checkboxVal"
        :formThead="formThead"
        @selectCheckbox="selectCheckboxData"
        @changeCheck="handleCheckAllChange"
        :isIndeterminate="isIndeterminate"
        :checkAll="checkAll"
        :loading="tableLoading"
        :border="false"
        stripe
        :max-height-s-s="400"
        show-summary
        :header-cell-style="{ background: '#545c64', color: '#fff' }"
        :summary-method-data="summaryMethodData"
        @selection-change="handleSelectionChange"
        :total="total"
        :page.sync="formQuery.page"
        :limit.sync="formQuery.rows"
        @pagination="getList"
      >
        <el-table-column
          fixed
          slot="selection"
          align="center"
          type="selection"
          width="50"
        />
        <el-table-column slot="isAttention" align="center" label="是否取消关注">
          <template slot-scope="scope">
            <span>{{ scope.row.isAttention ? "是" : "否" }}</span>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          slot="operation"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link textSkyBlue">
                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">修改</el-dropdown-item>
                <!-- <el-dropdown-item command="b">狮子头</el-dropdown-item>
                <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
                <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item> -->
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </my-table>
    </div>
  </div>
</template>

<script>
import variables from "@/styles/variables.scss";
import MyTable from "../components/myTable";
import { fandPageList, getTotalAmount } from "@/api/my";
export default {
  components: {
    MyTable,
  },
  data() {
    return {
      isIndeterminate: true,
      checkAll: false,
      tableKey: 1,
      tableLoading: false,
      summaryMethodData: [],
      tableData: [],
      formThead: [
        "多选",
        "关注者",
        "邮箱",
        "关注点",
        "打赏金额",
        "关注时间",
        "是否取消关注",
        "取消原因",
        "操作",
      ],
      checkboxVal: [],
      columnsData: [],
      columns: [
        { slot: "selection", label: "多选" },
        { label: "关注者", prop: "userName", align: "center" },
        { label: "邮箱", prop: "email", align: "center" },
        { label: "关注点", prop: "attention", align: "center" },
        { label: "打赏金额", prop: "exceptional", align: "center" },
        { label: "关注时间", prop: "attentionDate", align: "center" },
        { slot: "isAttention", label: "是否取消关注" },
        {
          label: "取消原因",
          prop: "offAttention",
          showTop: true,
          align: "center",
        },
        { slot: "operation", label: "操作" },
      ],
      total: 0,
      formQuery: {
        page: 1,
        rows: 10,
        userName: "",
        attention: "",
        attentionDate: "",
      },
    };
  },
  created() {
    this.getList();
    let a = [];
    if (localStorage.getItem("checkbox")) {
      this.checkboxVal = JSON.parse(localStorage.getItem("checkbox"));
    } else {
      this.checkboxVal.unshift("多选");
      this.checkboxVal.push("操作");
      localStorage.setItem("checkbox", JSON.stringify(this.checkboxVal));
      this.checkboxVal = JSON.parse(localStorage.getItem("checkbox"));
    }
  },

  watch: {
    checkboxVal(valArr) {
      localStorage.setItem("checkbox", JSON.stringify(valArr));
      this.columnsData = this.columns.filter((i) => {
        return valArr.indexOf(i.label) >= 0;
      });
      let checkedCount = valArr.length;
      this.checkAll = valArr.length === this.formThead.length;
      console.log(valArr.length === this.formThead.length , );
      this.isIndeterminate =
        checkedCount < 0 && checkedCount > this.formThead.length;
      this.tableKey = this.tableKey + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    },
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkboxVal = val ? this.formThead : [];
      this.isIndeterminate = val;
    },
    selectCheckboxData(val) {
      this.checkboxVal = val;
    },

    handleCommand(command) {
      this.$message("click on item " + command);
    },

    emptyForm() {
      this.formQuery.userName = "";
      this.formQuery.attention = "";
      this.formQuery.attentionDate = "";
      this.getList();
    },

    searchForm() {
      this.tableLoading = true;
      setTimeout(() => {
        if (
          !this.formQuery.userName &&
          !this.formQuery.attention &&
          !this.formQuery.attentionDate
        ) {
          this.getList();
        }
        this.tableData = this.tableData.filter((item) => {
          if (this.formQuery.userName) {
            if (item.userName.includes(this.formQuery.userName)) {
              return item;
            }
          }
          if (this.formQuery.attention) {
            if (item.attention.includes(this.formQuery.attention)) {
              return item;
            }
          }

          if (this.formQuery.attentionDate) {
            if (item.attentionDate.includes(this.formQuery.attentionDate)) {
              return item;
            }
          }
          if (this.formQuery.userName && this.formQuery.attention) {
            if (
              item.userName.includes(this.formQuery.userName) &&
              item.userName.includes(this.formQuery.attention)
            ) {
              return item;
            }
          }

          if (
            this.formQuery.userName &&
            this.formQuery.attention &&
            this.formQuery.attentionDate
          ) {
            if (
              item.userName.includes(this.formQuery.userName) &&
              item.userName.includes(this.formQuery.attention) &&
              item.userName.includes(this.formQuery.attentionDate)
            ) {
              return item;
            }
          }
        });
        this.tableLoading = false;
      }, 1500);
    },

    async getList() {
      this.summaryMethodData = [];
      this.tableLoading = true;
      const dt = await fandPageList();
      console.log(dt);
      const am = await getTotalAmount();
      setTimeout(() => {
        this.tableData = dt.data.content;
        this.total = dt.data.total;
        this.tableLoading = false;
        this.summaryMethodData.push(am.data.content);
      }, 1500);
    },
    handleSelectionChange(val) {
      console.log(val);
    },
  },
};
</script>

<style  scoped>
.textSkyBlue {
  color: #1890ff;
}
</style>
